<template>
   <div class="dashboard-container">
    <div class="app-container">
     <el-card shadow="never">
        <div v-if="$route.query.id">
           <el-breadcrumb separator-class="el-icon-arrow-right">
           <el-breadcrumb-item>学科管理</el-breadcrumb-item>
           <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
           <el-breadcrumb-item>标签管理</el-breadcrumb-item>
         </el-breadcrumb>
         <el-divider></el-divider>
        </div>
        <!-- 表单区域 -->
       <el-form  size="small" :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="标签名称">
            <el-input v-model="formInline.tagName"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select  v-model="formInline.state" placeholder="请选择">
              <el-option  label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button  size="small" @click="delFn">清除</el-button>
            <el-button type="primary"  size="small" @click="onSubmit">搜索</el-button>
          </el-form-item>
          <el-form-item class="filter-item fr" >
            <el-button @click="xueTags" v-if="$route.query.id" type="text" size="medium" icon="el-icon-back">返回学科</el-button>
            <el-button type="success" icon="el-icon-edit"  size="small" @click="addTags">新增标签</el-button>
          </el-form-item>
       </el-form>
        <!-- 提示框 -->
         <el-alert
           :title="`数据一共${total}条`"
           type="info"
           :closable="false"
           show-icon>
         </el-alert>
        <!-- 表格区域 -->
         <el-table
         :data="list"
         style="width: 100%">
         <el-table-column
           type="index"
           label="序号"
           width="180">
         </el-table-column>
         <el-table-column
           prop="subjectName"
           label="所属学科"
           width="180">
         </el-table-column>
         <el-table-column
           prop="tagName"
           label="标签名称">
         </el-table-column>
         <el-table-column
           prop="username"
           label="创建者">
         </el-table-column>
         <el-table-column
           label="创建日期">
           <template #default="{ row }">
             {{ row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}") }}
           </template>
         </el-table-column>
         <el-table-column
           label="状态">
           <template #default="{ row }">
             {{ dealFn(row.state) }}
           </template>
         </el-table-column>
         <el-table-column
           label="操作">
            <template #default="{ row }">
               <el-button
               @click="qiBtn(row)"
               v-if="row.state === 1"
                type="text"
                size="small">
                禁用
              </el-button>
              <el-button
               @click="qiBtn(row)"
                v-else
                type="text"
                size="small">
                启用
              </el-button>
               <el-button
               @click="editTags(row)"
                type="text"
                :disabled="row.state === 1"
                size="small">
                修改
              </el-button>
              <el-button
                type="text"
                :disabled="row.state === 1"
                size="small"
                @click="delTags(row)"
                >
                删除
              </el-button>
           </template>
         </el-table-column>
         </el-table>
        <!-- 分页 -->
        <el-pagination
          class="fr"
          layout="prev, pager, next, sizes, jumper"
          @size-change="handleSizeChange"
          @current-change="currentChange"
          :page-size="formInline.pagesize"
          :page-sizes="params.pageSize"
          :total="total">
        </el-pagination>
      </el-card>
    </div>
    <!-- 弹框 -->
   <TagsAdd :data="data" ref="myTags" @close="closeDialog" @load="loadList" :showDialog="showDialog"/>
   </div>
</template>

<script>
import TagsAdd from '../components/tags-add.vue'
import { list, changeState, remove } from '@/api/hmmm/tags.js'
export default {
  components: {
    TagsAdd
  },
  data () {
    return {
      formInline: {
        page: 1, // 当前页
        pagesize: 10, // 页条数
        tagName: '', // 标签名称
        state: null // 标签状态
      },
      params: {
        page: 1, // 页数
        pageSize: [5, 10, 20, 50]
      },
      list: [],
      total: 0,
      showDialog: false, // 弹框控制
      ww: {},
      data: {}// 回显
    }
  },
  mounted () {
    this.loadList()
  },
  methods: {
    onSubmit () {
      this.formInline.page = 1
      this.loadList(this.formInline)
    },
    // 清空表单数据
    delFn () {
      this.formInline = {
        name: '',
        value: ''
      }
      this.loadList()
    },
    // 获取列表
    async loadList () {
      if (this.$route.query.id) {
        console.log(this.$route.query)
        const res = await list({ ...this.formInline, subjectID: this.$route.query.id })
        console.log(res)
        this.list = res.data.items
        this.total = res.data.counts
      } else {
        const res = await list(this.formInline)
        console.log(res)
        this.list = res.data.items
        this.total = res.data.counts
      }
    },
    // 处理状态
    dealFn (state) {
      const arr = {
        1: '启用',
        0: '禁用'
      }
      return arr[state]
    },
    // 切换分页
    async currentChange (page) {
      this.formInline.page = page
      this.loadList(page)
    },
    handleSizeChange (val) {
      this.formInline.pagesize = val
      this.loadList()
    },
    addTags () {
      this.showDialog = true
    },
    // 关闭弹框
    closeDialog () {
      this.showDialog = false
    },
    async delTags (row) {
      this.ww = row
      const res = await remove(this.ww)
      this.$message.success('删除成功')
      console.log(res)
      this.loadList()
    },
    // 禁用启用切换
    async qiBtn (row) {
      console.log(row)
      this.ww = row
      if (row.state === 1) {
        this.ww.state = 0
        const res = await changeState(this.ww)
        console.log(res)
      } else {
        this.ww.state = 1
        const res = await changeState(this.ww)
        console.log(res)
      }
      this.$message.success('操作成功')
    },
    // 修改
    async editTags (data) {
      // console.log(data.id)
      this.showDialog = true
      this.data = data
      this.$refs.myTags.detailDialog(data)
    },
    xueTags () {
      this.$router.back()
    }

  }
}
</script>

<style scoped lang='less'></style>
